<template>
  <div class="music-controller">
    <!-- 三个控制按钮紧凑排列 -->
    <div class="control-buttons">
      <!-- 音乐开关按钮 -->
      <button 
        class="control-btn music-btn" 
        :class="{ 'active': isMusicEnabled, 'transitioning': isTransitioning }"
        @click="toggleMusic"
        :title="isMusicEnabled ? '关闭背景音乐' : '开启背景音乐'"
        :disabled="isTransitioning"
      >
        <span class="btn-icon">{{ musicIcon }}</span>
        <span class="btn-text">{{ isMusicEnabled ? '音乐开' : '音乐关' }}</span>
      </button>
      
      <!-- 音效开关按钮 -->
      <button 
        class="control-btn sound-btn" 
        :class="{ 'active': isSoundEnabled }"
        @click="toggleSound"
        :title="isSoundEnabled ? '关闭音效' : '开启音效'"
      >
        <span class="btn-icon">{{ soundIcon }}</span>
        <span class="btn-text">{{ isSoundEnabled ? '音效开' : '音效关' }}</span>
      </button>
      
      <!-- 设置按钮 -->
      <button 
        class="control-btn settings-btn"
        @click="showVolumePanel = !showVolumePanel"
        :title="showVolumePanel ? '隐藏音量设置' : '显示音量设置'"
      >
        <span class="btn-icon">⚙️</span>
        <span class="btn-text">设置</span>
      </button>
    </div>
    
    <!-- 音量控制面板 -->
    <div v-if="showVolumePanel" class="volume-panel">
      <div class="volume-item">
        <label class="volume-label">音乐音量</label>
        <input 
          type="range" 
          min="0" 
          max="1" 
          step="0.1" 
          :value="musicVolume" 
          @input="setMusicVolume($event.target.value)"
          class="volume-slider"
        />
        <span class="volume-value">{{ Math.round(musicVolume * 100) }}%</span>
      </div>
      
      <div class="volume-item">
        <label class="volume-label">音效音量</label>
        <input 
          type="range" 
          min="0" 
          max="1" 
          step="0.1" 
          :value="soundVolume" 
          @input="setSoundVolume($event.target.value)"
          class="volume-slider"
        />
        <span class="volume-value">{{ Math.round(soundVolume * 100) }}%</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useAudioStore } from '@/stores/audio'

const audioStore = useAudioStore()
const showVolumePanel = ref(false)
const isTransitioning = ref(false)

// 从 store 获取状态和方法
const isMusicEnabled = computed(() => audioStore.isMusicEnabled)
const isSoundEnabled = computed(() => audioStore.isSoundEnabled)
const musicVolume = computed(() => audioStore.musicVolume)
const soundVolume = computed(() => audioStore.soundVolume)
const musicIcon = computed(() => audioStore.musicIcon)
const soundIcon = computed(() => audioStore.soundIcon)

// 方法
const toggleMusic = async () => {
  if (isTransitioning.value) return
  
  isTransitioning.value = true
  try {
    await audioStore.toggleMusic()
  } finally {
    // 延迟重置过渡状态，让用户看到状态变化
    setTimeout(() => {
      isTransitioning.value = false
    }, 800)
  }
}

const toggleSound = () => {
  audioStore.toggleSound()
}

const setMusicVolume = (volume) => {
  audioStore.setMusicVolume(parseFloat(volume))
}

const setSoundVolume = (volume) => {
  audioStore.setSoundVolume(parseFloat(volume))
}


</script>

<style scoped>
.music-controller {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  max-width: 240px;
  margin: 8px;
}

.control-buttons {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.control-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 6px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  transition: all 0.25s ease;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  color: #64748b;
  border: 1px solid #e2e8f0;
  position: relative;
  overflow: hidden;
  min-height: 40px;
  justify-content: center;
}

.control-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.4s ease;
}

.control-btn:hover::before {
  left: 100%;
}

.control-btn:hover {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
  border-color: #cbd5e1;
  color: #475569;
}

.control-btn:active {
  transform: translateY(0) scale(0.99);
  transition: all 0.1s ease;
}

.control-btn.active {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  border-color: #1d4ed8;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
  animation: activeGlow 0.5s ease-out;
}

.control-btn.active:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

@keyframes activeGlow {
  0% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
  }
  50% {
    transform: scale(1.01);
    box-shadow: 0 3px 10px rgba(59, 130, 246, 0.5);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
  }
}

.control-btn.transitioning {
  opacity: 0.6;
  cursor: not-allowed;
  transform: scale(0.95);
}

.control-btn.transitioning:hover {
  transform: scale(0.95);
  box-shadow: none;
}

.loading-indicator {
  font-size: 12px;
  margin-top: 2px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.btn-icon {
  font-size: 14px;
  transition: all 0.25s ease;
  display: inline-block;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
}

.control-btn:hover .btn-icon {
  transform: scale(1.08) rotate(2deg);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

.control-btn.active .btn-icon {
  animation: iconPulse 0.5s ease-out;
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.3));
}

@keyframes iconPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.12);
  }
}

.btn-text {
  font-size: 9px;
  transition: all 0.25s ease;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  line-height: 1;
}

.control-btn:hover .btn-text {
  transform: translateY(-1px);
  color: #334155;
}

.control-btn.active .btn-text {
  font-weight: 700;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.settings-btn {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  border-color: #b45309;
}

.settings-btn:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}

.settings-btn:hover .btn-icon {
  animation: gearSpin 1s linear infinite;
}

@keyframes gearSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.volume-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  animation: slideDown 0.25s ease-out;
  transform-origin: top;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

@keyframes slideDown {
  0% {
    opacity: 0;
    transform: scaleY(0) translateY(-6px);
    max-height: 0;
  }
  100% {
    opacity: 1;
    transform: scaleY(1) translateY(0);
    max-height: 120px;
  }
}

.volume-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.volume-label {
  font-size: 10px;
  font-weight: 600;
  color: #475569;
  min-width: 48px;
  text-transform: uppercase;
  letter-spacing: 0.2px;
}

.volume-slider {
  flex: 1;
  height: 3px;
  border-radius: 1.5px;
  background: linear-gradient(90deg, #e2e8f0 0%, #cbd5e1 100%);
  outline: none;
  -webkit-appearance: none;
  transition: all 0.25s ease;
  cursor: pointer;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
}

.volume-slider:hover {
  background: linear-gradient(90deg, #cbd5e1 0%, #94a3b8 100%);
  height: 4px;
}

.volume-slider:focus {
  background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
  height: 4px;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.15);
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  cursor: pointer;
  border: 1.5px solid white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
}

.volume-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

.volume-slider::-webkit-slider-thumb:active {
  transform: scale(1.1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  cursor: pointer;
  border: 1.5px solid white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.volume-value {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  min-width: 28px;
  text-align: right;
  font-family: 'Courier New', monospace;
}

.music-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: #f0f9eb;
  border-radius: 8px;
  border: 1px solid #e1f3d8;
}

.music-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.music-icon {
  font-size: 24px;
}

.music-text {
  font-size: 16px;
  font-weight: 600;
  color: #22c55e;
}

.music-description {
  font-size: 12px;
  color: #6b7280;
  text-align: center;
}

.test-play-btn {
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.test-play-btn:hover {
  background: #2563eb;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .music-controller {
    padding: 10px;
    max-width: 100%;
    margin: 6px;
  }
  
  .control-buttons {
    gap: 4px;
  }
  
  .control-btn {
    min-height: 36px;
    padding: 6px 4px;
  }
  
  .volume-panel {
    padding: 8px;
  }
  
  .volume-item {
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
  }
  
  .volume-label {
    text-align: center;
    min-width: auto;
  }
  
  .volume-value {
    text-align: center;
    min-width: auto;
  }
}
</style>
